<!-- 07颜色
    语法
    bgc————background-color:;
    特点
    默认透明

    08背景图
    语法
    bgi————background-image:url(图片路径);
    特点
    图片有自己的尺寸，容器过大会自动铺满

    09背景平铺
    语法
    bgr————background-repeat:;
    值
    1.no-repeat————不平铺（只显示一个图片）
    2.repeat-x————水平平铺
    3.repeat-y————垂直平铺
    4.repeat————水平垂直平铺（默认）
    特点
    1.背景图在背景色之上

    10背景定位
    语法
    bgp————background-position:水平位置 垂直位置;
    值
    1.方位词
        1.1.top————上
        1.2.bottom————下
        1.3.left————左
        1.4.right————右
        1.5.center————居中
    2.像素
        2.1.px（正为右下，负为左上）
        2.2.%
    特点
    超出容器则显示不全
    以上属性应写在一个选择器中

    11背景复合属性
    前言
    背景background为复合属性，可一键对多值
    语法
    background:背景颜色 背景图片 背景平铺 背景定位;
    特点
    1.以上属性顺序可任意调换
    2.背景图片在背景颜色之上
    3.以上属性应写在一个选择器中

    12背景图与图片的区别
    1.重要的图片放img标签中，不重要的图片放css属性background-img背景图中
    2.图片和调宽高，背景图只能调平铺和位置
 -->


 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bgc{
            /* 
            background-color: rgba(50, 50, 50, 0.5);
            width: 400px;
            height: 400px;
            background-repeat: no-repeat;
            background-image: url('./car.png');
            background-position: 50% 50%;
             */
            /* 复合写法 */
            width: 400px;
            height: 400px;
            background: rgba(50, 50, 50, 0.5) url(./car.png) no-repeat 50% 50%;
           
        }
    </style>
 </head>
 <body>
    <div class="bgc">这邮电河里</div>
 </body>
 </html>